import { MDataDriver, MineEases, MineMotion, MineTimeline, ref } from "@dao3fun/mine-motion";
//1500,700


// 创建 UiScreen
const defaultScreen = UiScreen.create();
const uiScale = UiScale.create();

uiScale.scale = screenWidth / 1500;
defaultScreen.uiScale = uiScale;
setInterval(async ()=>{
  uiScale.scale = screenWidth / 1500;
  defaultScreen.uiScale = uiScale;
  //假设我的UI元素需要在a的位置，那么……
  box.position.offset.y = screenHeight/uiScale.scale-50;
  backBox.position.offset.y = screenHeight/uiScale.scale-50;
  //console.log('client: W:'+screenWidth+' H:'+screenHeight+' Scale:'+uiScale.scale+' posy:'+box.position.offset.y);
},1000)//1秒检测1次


function createBox(sizex:number,sizey:number,x: number, y: number, color: Vec3 , opacity:number) {
    const box = UiBox.create();
    box.size.offset.x = sizex;
    box.size.offset.y = sizey;
    box.position.offset.x = x;
    box.position.offset.y = y;
    box.backgroundColor.copy(color);
    box.backgroundOpacity = opacity;
    box.parent = defaultScreen;
    return box;
}

function createText(sizex:number,sizey:number, sizetext:number, x: number, y: number, text: string, color: Vec3, opacity: number, textcolor: Vec3) {
    const box = UiText.create();
    box.size.offset.x = sizex;
    box.size.offset.y = sizey;
    box.textContent = text;
    box.textFontSize = sizetext;
    box.position.offset.x = x;
    box.position.offset.y = y;
    box.backgroundColor.copy(color)
    box.backgroundOpacity = opacity;
    box.textColor.copy(textcolor);
    box.parent = defaultScreen;
    return box;
}


//ui血条
const backBox = createBox(500, 50, 500, 0, Vec3.create({r:127,g:127,b:127}), 0.5);


const box = UiText.create();
box.size.offset.x = 1000;
box.size.offset.y = 50;


/*
box.position.offset.y = screenWidth/uiScale.scale-50;
backBox.position.offset.y = screenWidth/uiScale.scale-50;
setInterval(()=>{
  box.position.offset.y = screenWidth/uiScale.scale-50;
  backBox.position.offset.y = screenWidth/uiScale.scale-50;
},1000)

*/
//backBox.position.offset.y = 650;
//box.position.offset.y = 650;

box.position.offset.x = 500;
box.backgroundColor.r = 255;
box.backgroundColor.g = 255;
box.backgroundColor.b = 255;
box.textContent = '当前血量：/';
box.textFontSize = 18;
box.backgroundOpacity = 1;
box.textColor.copy(Vec3.create({r:255,g:255,b:255}))
box.parent = defaultScreen;

const hp = ref(0);

remoteChannel.onClientEvent((event) => {
  if(event.type !== 'hp'){
    return;
  }
  hp.value = event.data.hp/event.data.maxHp*100;
  box.textContent = `当前血量：${event.data.hp}/${event.data.maxHp}`
})

const tl = new MineTimeline({
  driver: new MDataDriver(hp, {
    damping: {
      enabled: true,
      halflife: 500,
      deltaMs: 10
    }
  })
});

tl.animate(box.size.offset, [
  {value: {x: 0}, duration: 0},
  {value: {x: 500}, duration: 100}
], {
  offset: 0
});
tl.animate(box.backgroundColor, [
  {value: {r: 255, g: 0, b: 0}, duration: 0},
  {value: {r: 255, g: 255, b: 0}, duration: 70},
  {value: {r: 0, g: 255, b: 0}, duration: 30}
], {
  offset: 0
});
tl.run();


const task = createText(400, 50, 16, -1000, 50, '当前任务: undefined', Vec3.create({r:127,g:127,b:127}), 0.5, Vec3.create({r:255,g:255,b:255}));
const close = UiImage.create();
close.backgroundOpacity =0 ;
close.size.offset.x = 20;
close.size.offset.y = 50;
close.position.offset.x = 1000;
close.position.offset.y = 50;
close.parent = defaultScreen;
close.image = 'picture/三角形箭头实心.png';

close.events.on('pointerup',()=>{
  if (task.position.offset.x === 0){
    closeTask();
  }else if (task.position.offset.x === -400){
    changetask('',3);
  }
})
async function closeTask() {
  if (task.position.offset.x < 0){
    console.log('(client)当前无法关闭任务显示');
    return;
  }
  //close.rotation = 180;
  MineMotion.animate(task.position.offset, [
        {value: {x: 0, y: 50}, duration: 0},
        {value: {x: -400, y: 50}, duration: 1000, ease: MineEases.easeInOut},
        ], {
        delay: 0,
        speed: 1
    })
    MineMotion.animate(close.position.offset, [
        {value: {x: 400, y: 50}, duration: 0},
        {value: {x: 0, y: 50}, duration: 1000, ease: MineEases.easeInOut},
        ], {
        delay: 0,
        speed: 1
    })
    let timer=0;
    while (close.rotation<180){
      close.rotation+=(180-close.rotation)/(1000-timer)*30;
      await sleep(10);
      timer+=10;
    }
    close.rotation = 180;
}
async function changetask(text:string,type:0|1|2|3) {
  if (type === 0){
    MineMotion.animate(task.position.offset, [
        {value: {x: 0, y: 50}, duration: 0},
        {value: {x: -400, y: 50}, duration: 1000, ease: MineEases.easeInOut},
        {value: {x: -400, y: 50}, duration: 200},
        {value: {x: 0, y: 50}, duration: 1000, ease: MineEases.easeInOut},
        ], {
        delay: 0,
        speed: 1
    })
    MineMotion.animate(close.position.offset, [
        {value: {x: 400, y: 50}, duration: 0},
        {value: {x: 0, y: 50}, duration: 1000, ease: MineEases.easeInOut},
        {value: {x: 0, y: 50}, duration: 200},
        {value: {x: 400, y: 50}, duration: 1000, ease: MineEases.easeInOut},
        ], {
        delay: 0,
        speed: 1
    })
    let timer=0;
    while (close.rotation<180){
      close.rotation+=(180-close.rotation)/(1000-timer)*30;
      await sleep(10);
      timer+=10;
    }
    close.rotation = 180;
    //await sleep(1000);
    task.textContent = '当前任务: '+text;
    await sleep(200);
    timer=0;
    while (close.rotation>0){
      close.rotation-=(close.rotation-0)/(1000-timer)*30;
      await sleep(10);
      timer+=10;
    }
    close.rotation = 0;
    return;
  }else if (type === 1){
    task.textContent = '当前任务: '+text;
    close.rotation = 180;
    MineMotion.animate(task.position.offset, [
      
        {value: {x: -400, y: 50}, duration: 0},
        {value: {x: 0, y: 50}, duration: 1000, ease: MineEases.easeInOut},
        ], {
        delay: 0,
        speed: 1
    })
    MineMotion.animate(close.position.offset, [
        {value: {x: 0, y: 50}, duration: 0},
        {value: {x: 400, y: 50}, duration: 1000, ease: MineEases.easeInOut},
        ], {
        delay: 0,
        speed: 1
    })
    //await sleep(1000);
    let timer=0;
    while (close.rotation>0){
      close.rotation-=(close.rotation-0)/(1000-timer)*30;
      await sleep(10);
      timer+=10;
    }
    close.rotation = 0;
    return;
  }else if (type === 2){
    task.textContent = '当前任务: '+text;
  }else if (type === 3){
    close.rotation = 180;
    MineMotion.animate(task.position.offset, [
      
        {value: {x: -400, y: 50}, duration: 0},
        {value: {x: 0, y: 50}, duration: 1000, ease: MineEases.easeInOut},
        ], {
        delay: 0,
        speed: 1
    })
    MineMotion.animate(close.position.offset, [
        {value: {x: 0, y: 50}, duration: 0},
        {value: {x: 400, y: 50}, duration: 1000, ease: MineEases.easeInOut},
        ], {
        delay: 0,
        speed: 1
    })
    //await sleep(1000);
    let timer=0;
    while (close.rotation>0){
      close.rotation-=(close.rotation-0)/(1000-timer)*30;
      await sleep(10);
      timer+=10;
    }
    close.rotation = 0;
    return;
  }
    
}
remoteChannel.onClientEvent((event)=>{
  if(event.type !== 'task'){
    return;
  }
  
  changetask(event.data.text,event.data.type);
})


let addEventList:string[] = [];
let can_show_add:boolean = true; 

const give = createText(400, 100, 25, -400, 100, '', Vec3.create({r:127,g:127,b:127}), 0.5, Vec3.create({r:255,g:255,b:255}));

async function add(text:string) {
    give.textContent = text;
    MineMotion.animate(give.position.offset, [
        {value: {x: -400, y: 400}, duration: 0},
        {value: {x: 0, y: 400}, duration: 1000, ease: MineEases.easeInOut},
        {value: {x: 0, y: 400}, duration: 1000},
        {value: {x: -400, y: 400}, duration: 1000, ease: MineEases.easeInOut},
        ], {
        delay: 0,
        speed: 1
    })
    await sleep(3000);
    give.textContent = '';
    return;
}

remoteChannel.onClientEvent((event) => {
    if(event.type !== 'add'){
      return;
    }
    addEventList.push(event.data.text);
})

setInterval(async ()=>{
  if (addEventList.length > 0 && can_show_add){
    let t = addEventList.pop();
    if (t){
        can_show_add = false;
        await add(t);
        can_show_add = true;
    }
  } 
},100)